<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商城管理</el-breadcrumb-item>
			<el-breadcrumb-item>商户管理</el-breadcrumb-item>
			<el-breadcrumb-item>选择品牌</el-breadcrumb-item>
			<el-breadcrumb-item>编辑商户</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-row :gutter="60">
				<el-col :span="12">
					<span>商品序号</span>
					<el-input v-model="infoList.sort" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>商品名称</span>
					<el-input v-model="infoList.itemName" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>售价</span>
					<el-input v-model="infoList.priceDiscount" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>原价</span>
					<el-input v-model="infoList.priceNormal" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>生效时间</span>
					<el-date-picker
					  v-model="infoList.startTime"
					  type="datetime"
					  value-format="yyyy-MM-dd HH:mm:ss"
					  placeholder="生效时间">
					</el-date-picker>
				</el-col>
				<el-col :span="12">
					<span>有效期</span>
					<el-input v-model="infoList.endTime" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>次数</span>
					<el-input v-model="infoList.counts" disabled></el-input>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>营销标签</span>
					<div class="listInner-out">
						<div v-for="(item,index) in infoList.tagVoList" class="listInner">
							<el-input v-model="item.value" disabled></el-input>
							<el-input v-model="item.code" disabled></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>商品介绍</span>
					<div class="listInner-out">
						<div v-for="(item,index) in infoList.content" class="listInner">
							<el-input v-model="item.title" disabled></el-input>
							<el-input v-model="item.details" disabled></el-input>
							<el-input v-model="item.counts" disabled></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>购买须知</span>
					<div class="listInner-out">
						<div v-for="(item,index) in infoList.sellRemark" class="listInner">
							<el-input v-model="item.title" disabled></el-input>
							<el-input v-model="item.content" disabled></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="24" class="listWapper">
					<span>使用规则</span>
					<div class="listInner-out">
						<div v-for="(item,index) in infoList.remark" class="listInner">
							<el-input v-model="item.content" disabled></el-input>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<span>商品库存</span>
					<el-input v-model="infoList.validityCount" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>商品属性</span>
					<el-input v-model="infoList.itemType" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>保存上架</span>
					<el-radio v-model="infoList.onOffStatus" :label="1">立即上架</el-radio>
					<el-radio v-model="infoList.onOffStatus" :label="0">暂不上架</el-radio>
				</el-col>
			</el-row>
			<el-button type="primary">保存</el-button>
			<el-button @click="back">取消</el-button>
		</el-card>
		
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				infoList:{}
			}
		},
		created() {
			this.getInfo()
		},
		methods:{
			async getInfo(){
				var id = this.$route.query.id
				const {data:res} = await this.$http.post('/itemManage/queryItemsById',{id:12})
				// console.log(res);
				this.infoList = res.data
				this.infoList.content = JSON.parse(this.infoList.content)
				this.infoList.remark = JSON.parse(this.infoList.remark)
				this.infoList.sellRemark = JSON.parse(this.infoList.sellRemark)
			},
			back(){
				this.$router.go(-1);
			}
		}
	}
</script>

<style lang="less" scoped>
	.el-col{
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		span{
			display: inline-block;
			width: 80px;
			text-align: right;
			margin-right: 15px;
		}
	}
	.listWapper{
		align-items: flex-start;
		flex-wrap: wrap;
		.listInner-out{
			flex: 1;
			.listInner{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 15px;
				.el-input{
					margin-right: 20px;
				}
			}
			.listInner:last-child{
				margin-bottom:0;
			}
		}
	}
</style>
